
<template>

    <div>
        <Row>

            <i-col span="10">
                <div style="line-height:50px;margin-left:20px;">
                    <row>
                        <i-col span="2"><strong>项目:</strong></i-col>
                        <i-col span="6" offset="1">{{ service.project }}</i-col>
                        <i-col span="2" offset="1" ><strong>服务:</strong></i-col>
                        <i-col span="6">{{ service.name }}</i-col>
                    </row>
                </div>
                <i-table border stripe  :columns="format" :data="show_list" height="200">
                    <template slot-scope="{ row, index }" slot="action">
                        <Button @click="btn_get_log(index)">查看日志</Button>
                    </template>
                </i-table >
            </i-col>
            <i-col span="12" offset="1">
                <span>构建日志:</span>
                <MyTerminal style="height:780px;overflow:auto" :terminal="terminal" ref="xterm">

                </MyTerminal>
            </i-col>

        </Row>




    </div>

</template>


<script>

import {post} from '@/api/http'
import { 
    get_service_detail,
    get_service_task,
    job_log
} from  '@/api'

import { colors } from '@/common/util' 

import MyTerminal from '@/lib/myTerminal';

export default {
    components:{
        MyTerminal
    },
    data() {
        return {
            format:[
                {
                    title: '构建环境',key: 'env',
                    render: (h,params) => {
                        let env = params.row.env
                        
                        if(env=='test'){
                            return h('span','测试')
                        }else if(env=='prod'){
                            return h('span','生产')
                        }else{
                            return h('span',env)
                        }
                    }
                },
                {
                    title: '上次构建成功',key: 'start_time',
                },
                {
                    title: '构建持续时间(秒)',key: 'duration',
                    render: (h,params) => {
                        let duration = params.row.duration
                        let value = duration/1000
                        if(value==0){
                            return h('span','<10')
                        }else{
                            return h('span',value)
                        }
                        
                    }
                },
                {
                    title: '上次构建JobID',key: 'job_id',
                },
                {
                    title: '结果',key:'status',
                    render: (h,params) => {
                        let status = params.row.status
                        if(status==99){
                            return h('span',{
                                style: {
                                    color: colors['green'],
                                }
                            },'成功')
                        }else if (status==3 ){
                            return h('span',{
                                style: {
                                    color: colors['yellow']
                                }
                            },'取消')
                        }else if (status==2 ){
                            return h('span',{
                                style: {
                                    color: colors['red']
                                }
                            },'失败')
                        }else {
                            return h('span',{},'构建当中')
                        }
                    }
                    
                },
                {
                    title: '操作',slot: 'action',width: 150,align: 'center'
                },
                
            ],
            service: {
                name: '',
                project:'',
            },
            show_list: [],

            terminal: {
                pid: 1,
                name: "terminal",
                cols: 400,
                rows: 100,
            },
            log_index: 0,
            total_length: 0,
            service_index: '',
            
        }
    },
    methods: {
        btn_get_log(index){
            this.service_index = index,
            this.log_index= 0 ,
            this.total_length=0,
            this.$refs.xterm.term.clear()
            this.get_log()
            this.timer = setInterval(this.get_log, 5000);
        },
        get_log(){
            console.log("this.log_index: "+this.log_index)
            let task = this.show_list[this.service_index]            
            let data = {
                "project":task.project,
                "service":task.service,
                "env":task.env,
                "job_id":task.job_id,
            }
            data["index"]=this.log_index,
            post(job_log,data).then(response=>{
                let data = response.data
                let log = data.log
                let current_length = data.current_length
                let total_length = data.total_length
                let end = data.end

                console.log(total_length+' '+end)
                if(total_length != this.total_length){
                    this.$refs.xterm.term.writeln(log)
                }
                this.total_length = total_length
                if(end==true){
                    setTimeout(() =>{
                        clearInterval(this.timer)
                    },6000); 
                }else{
                    this.log_index += current_length
                }
            })
        },
        refresh() {
            let query = this.$router.currentRoute.query
            let id = query.id
            let data = {"id":id}

            post(get_service_detail,data).then( (response) => {
                this.service = response.data
                console.log(this.service)
                let data = {
                    "project": this.service.project,
                    "service":this.service.name,
                }
                post(get_service_task,data).then(response=>{
                    this.show_list = response.data
                    console.log(this.show_list)
                })
            })


        }
    },
    mounted: function() {
        this.refresh()
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
}
</script>
<style scoped>
    span {
        color: purple;
    }
    .box {
        display: flex;
        display: -webkit-flex; 
    }

    .column-2 {
        flex:1;
    } 

    .column-1,.column-2,.column-3 {
        box-sizing: border-box;
    }
</style>
<style >
    pre{
        margin-left:40px;
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>